<template>
  <div id="mychart2" :style="myChartStyle2"></div>
</template>
<script>
import * as echarts from "echarts";
import axios from "axios";
export default {
  data() {
    return {
      xData: ['1月','2月','3月','4月','5月','6月'], //横坐标
      yData: [1,2,3,4,5,6], //数据
      myChartStyle2: { float: "left", width: "100%", height: "300px" }, //图表样式
    };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      var date = new Date();
      let month = date.getMonth()+1;
      this.xData[5]=month+'月'
      this.xData[4]=(month-1>0?month-1:month+12-1)+'月'
      this.xData[3]=(month-2>0?month-2:month+12-2)+'月'
      this.xData[2]=(month-3>0?month-3:month+12-3)+'月'
      this.xData[1]=(month-4>0?month-4:month+12-4)+'月'
      this.xData[0]=(month-5>0?month-5:month+12-5)+'月'
      //获取数据
      axios({
              method: 'get',
              url: '/api/road_apply_logs/getNumByDate',

            })
            .then((res)=>{
              this.yData=res.data.data
              // 基本柱状图
              const option = {
                xAxis: {
                  data: this.xData
                },
                yAxis: {},
                series: [
                  {
                    type: "bar", //形状为柱状图
                    data: this.yData
                  }
                ],
                // grid:{
                //   x: 100,
                //   y: 100,
                //   x2: 100,
                //   y2: 100,
                //   borderWidth: 1,
                // }
              };
              const myChart = echarts.init(document.getElementById("mychart2"));
              myChart.setOption(option);
            });

      //随着屏幕大小调节图表
      // window.addEventListener("resize", () => {
      //   myChart.resize();
      // });
    }
  }
};
</script>